import React, {Component} from 'react';
import {
	AppRegistry,
	View,
	Text,
	TextInput,
	Image,
	ScrollView,
	ListView,
	Alert,
	StyleSheet,
} from 'react-native';

class RandomImage extends Component {
	render() {
		return (
			<View>
				<Image
					style={{
						width: 320,
						height: 200,
					}}
					resizeMode={"contain"}
					source={{uri: 'https://unsplash.it/600/400/?random'}}
				/>
			</View>
		);
	}
}

class PizzaTranslator extends Component {
	constructor(props) {
		super(props);
		this.state = {text: ''};
	}

	render() {
		return (
			<View style={{padding: 10}}>
				<TextInput
					style={{height: 40}}
					placeholder="Type here to translate!"
					onChangeText={(text) => this.setState({text})}
				/>
				<Text style={{padding: 10, fontSize: 42}}>
					{this.state.text.split(' ').map((word) => word && '🍕').join(' ')}
				</Text>
			</View>
		);
	}
}

class UselessTextInput extends Component {
	render() {
		return (
			<TextInput
				{...this.props}
				editable={true}
				maxLength={40}
			/>
		);
	}
}

class UselessTextInputMultiline extends Component {
	constructor(props) {
		super(props);

		this.state = {
			text: 'Useless Multiline Placeholder  haha',
		};
	}

	render() {
		return (
			<View
				style={{
					borderBottomColor: 'pink',
					borderBottomWidth: 1,
				}}
			>
				<UselessTextInput
					multiline={true}
					numberOfLines={4}
					onChangeText={(text) => this.setState({text})}
					value={this.state.text}
				/>
			</View>
		);
	}
}

class ListViewBasics extends Component {
	constructor(props) {
		super(props);
		const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
		this.state = {
			dataSource: ds.cloneWithRows([
				'John', 'joe', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin',
			]),
		};
	}

	render() {
		return (
			<View style={{flex:1, paddingTop:22}}>
				<ListView
					dataSource={this.state.dataSource}
					renderRow={(rowData) => {
				  	return <Text
					    style={{
					      borderWidth:2,
						    borderColor:'#99c4ff',
						    marginTop:2,
						    borderRadius:4,
						    padding:5,
						    backgroundColor:'#d0ffa7',
					    }}
				  	>{rowData}</Text>
				  }}
				/>
			</View>
		);
	}
}

class MovieListItem extends Component {
	constructor(props) {
		super(props);
		this.state = {
			title: props.title,
			releaseYear: props.releaseYear,
		}
	}

	render() {
		return (
			<View style={{
				flex:1,
				flexDirection: 'row',
			}}>
				<View style={movieListItemStyle.itemstyle}>
					<Text>{this.state.title}</Text>
				</View>
				<View style={movieListItemStyle.itemstyle}>
					<Text>{this.state.releaseYear}</Text>
				</View>
			</View>
		);
	}
}

const movieListItemStyle = StyleSheet.create({
	itemstyle: {
		paddingLeft: 10,
		paddingRight: 10,
		width: 100,
		height: 60,
		borderWidth: 1,
		borderColor: 'red',
		backgroundColor: 'powderblue',
	},
});

class MovieList extends Component {
	constructor(props) {
		super(props);
		const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
		this.state = {
			dataSource: ds.cloneWithRows([
				{
					"title": "Star Wars",
					"releaseYear": "1977"
				},
				{
					"title": "Back to the Future",
					"releaseYear": "1985"
				},
			]),
		};

		// promise style
		// fetch('https://facebook.github.io/react-native/movies.json')
		// 	.then((response) => response.json())
		// 	.then((responseJson) => {
		// 		this.setState({
		// 			dataSource: ds.cloneWithRows(responseJson.movies),
		// 		});
		// 	});


		// es7 async/await style
		let that = this;

		async function getMoviesFromApi() {
			try {
				let response = await fetch('https://facebook.github.io/react-native/movies.json');
				let responseJson = await response.json();
				that.setState({
					dataSource: ds.cloneWithRows(responseJson.movies),
				});
			} catch (error) {
				console.error(error);
			}
		}

		getMoviesFromApi();
	}

	render() {

		// row item without customized style
		// renderRow={(rowData) => <Text>{rowData.title}:{rowData.releaseYear}</Text>}
		return (
			<ListView
				dataSource={this.state.dataSource}
				// row item with style
				renderRow={(rowData) => <MovieListItem title={rowData.title} releaseYear={rowData.releaseYear} />}
			/>
		);
	}
}

class TryReactNative extends Component {
	render() {
		return (
			<ScrollView>
				<MovieList />
				<ListViewBasics />
				<RandomImage />
				<PizzaTranslator />
				<UselessTextInputMultiline />
			</ScrollView>
		);
	}
}

AppRegistry.registerComponent('tryReactNative', () => TryReactNative);
